<script setup lang="ts">
import "./eg_button.scss"
import {computed, getCurrentInstance, PropType} from "vue";
import egTheme from "../../conf/EgTheme.ts";

const props = defineProps({
  // 尺寸大小
  size: {
    type: String as PropType<'small' | 'medium' | 'large'>,
    default: "small"
  },
  // 按钮类型
  type: {
    type: String as PropType<'primary' | 'danger' | 'info' | "success" | "warning" | "text">,
    default: "info"
  },
  // 边框线
  dashed: {
    type: Boolean,
    default: false
  },
  ghost: {
    type: Boolean,
    default: false
  },
  // 圆形按钮
  circle: {
    type: Boolean,
    default: false
  },
  // 圆角
  round: {
    type: Number,
    default: 0
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 文本按钮
  text: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(["click"])

const handleClick = () => emits("click")
const egType = computed(() => egTheme.themeList.includes(props.type?.toLowerCase())) ? props.type : "info"
</script>

<template>
  <button
      v-ripple
      :text="text"
      @click="handleClick"
      :disabled="disabled"
      :circle="circle"
      :ghost="ghost"
      :dashed="dashed"
      :size="size"
      :style="{
        borderRadius: round + 'px'
      }"
      :theme-type="egType"
      :class="`eg_button eg_button_${egType}`">
    <slot name="default"></slot>
    <slot name="icon"></slot>
  </button>
</template>

<style scoped>

</style>
